<template>
  <div class="todolist_wraper">
    <TrashCan :ref-position="itemPosition"></TrashCan>
    <div>
      <button @click="handleListChange">random</button>
    </div>
    <input type="text" v-model="title" @keydown.enter="addTodo" />
    <button v-if="active < all" @click="clear">清理</button>
    <ul class="list" v-if="todos.length">
      <transition-group @before-enter="handleBeforeEnter" name="fade">
        <li ref="item" v-for="(todo, i) in todos" :key="todo.title">
          <input type="checkbox" v-model="todo.done" />
          <span :class="{ done: todo.done }">{{ todo.title }}</span>
          <i @click="handleClose(i)" class="close_icon">x</i>
        </li>
      </transition-group>
    </ul>
    <div v-else>暂无数据</div>
    <div>
      全选
      <input type="checkbox" v-model="allDone" />
      <span>{{ active }} / {{ all }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watchEffect, reactive, getCurrentInstance } from "vue";
import TrashCan from "./trashCan.vue";
type Item = { title: string; done: boolean };

const context = getCurrentInstance();
let title = ref("");
let todos = ref([{ title: "学习Vue", done: false }] as Item[]);
let itemPosition = ref({ left: 0, top: 0 });

function updateToTrash(el: HTMLElement) {
  let { left, top } = el.getBoundingClientRect();

  itemPosition.value = { left, top };
}

function addTodo() {
  todos.value.push({ title: title.value, done: false });
  title.value = "";
}

function handleClose(i: number) {
  updateToTrash((context?.refs?.item as HTMLElement[])[i]);
  todos.value.splice(i, 1);
}

function clear() {
  todos.value = todos.value.filter((v) => !v.done);
}

function handleListChange() {
  let len;
  let count = (len = todos.value.length);
  while (count--) {
    let i = Math.floor(len * Math.random());
    let j = Math.floor(len * Math.random());
    console.log("ij", i, j);
    [todos.value[i], todos.value[j]] = [todos.value[j], todos.value[i]];
  }
}

function handleBeforeEnter(el: Element) {
  console.log("el", el);
}

let active = computed(() => {
  console.log("todo", todos.value.slice());
  return todos.value.filter((v) => !v.done).length;
});

let all = computed(() => todos.value.length);
let allDone = computed({
  get: function () {
    return active.value === 0;
  },
  set: function (value: boolean) {
    todos.value.forEach((todo) => {
      todo.done = value;
    });
  },
});
</script>

<style lang="scss" scoped>
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-move {
  transition: transform 0.8s ease;
}

// .fade-enter-to,
// .fade-leave-from {
//   opacity: 0;
//   // transform: translateX(30px);
// }
.fade-enter-active,
.fade-leave-active {
  transition: all 0.8s linear;
}
.todolist_wraper {
  margin: 0 auto;
  width: 250px;
  .list {
    display: flex;
    list-style: none;
    flex-direction: column;
    align-items: flex-start;
    li {
      display: flex;
      align-items: center;
      line-height: 30px;
      height: 30px;
      width: 100%;
      & .close_icon {
        margin-left: 20px;
        color: red;
        font-size: 20px;
        margin-top: -4px;
        &:hover {
          cursor: pointer;
          font-weight: 600;
          line-height: 1;
        }
      }
    }
  }
}
</style>
